<script lang="ts" setup>
interface ResData {
  data: {
    retData: any[];
  };
}
defineOptions({
  name: "MultiLose"
});
const props = withDefaults(defineProps<{ resData: ResData }>(), {
  resData: () => ({ data: { retData: [] } })
});
import { getSvg } from "@/utils";
import useWinRes from "../../hooks/useWinRes";
const { toggleWinRes } = useWinRes();
const retData = props?.resData?.data?.retData;
</script>
<template>
  <div class="w-100vw h-100vh overflow-y-auto center font-[Inter,Inter]">
    <div class="w-350 h-438 relative">
      <img class="w-full h-384" :src="getSvg('Frame_778')" alt="Frame_778" />
      <p
        class="absolute top-124 left-50% translate-x-[-50%] font-300 text-11 color-#787878 text-center"
      >
        หมายเลขเหล่านี้ ไม่ถูกรางวัล
      </p>
      <div
        class="scroll-bar overflow-y-auto absolute top-146 left-50% translate-x-[-50%] w-308 mx-auto h-60 font-normal text-10 color-[#E90F0F] lh-15 text-left"
      >
        <i v-for="(it, idx) in retData" :key="idx" class="w-50 inline-block"
          >{{ it.number }}{{ idx < retData.length - 1 ? "、" : "" }}</i
        >
      </div>
      <div
        class="absolute top-220 left-50% translate-x-[-50%] w-320 h-100 b-1 b-solid b-pink"
      ></div>
      <div
        class="absolute top-328 left-50% translate-x-[-50%] text-center font-300 text-10 color-#424242"
      >
        กรุณาตรวจสอบอีกครั้งกับสำนักงานสลากกินแบ่งรัฐบาล
      </div>
      <div
        class="w-36 h-36 absolute bottom-0 left-50% translate-x-[-50%]"
        @click="toggleWinRes()"
      >
        <img class="w-36 h-36" :src="getSvg('Close')" alt="" />
      </div>
    </div>
  </div>
</template>
